﻿<!DOCTYPE html>
<html>
  <head>
    <title>车辆信息</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="/static/plugin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/static/css/public.css" media="all" />
    <script type="text/javascript" src="/static/plugin/jquery/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="/static/plugin/layui/layui.js"></script>
	  <script type="text/javascript" src="/static/js/base.js"></script>
	<style type="text/css">
		.xing
		{
			color: red;
			float: left;
			display: block;
			width: 0.1%;
			margin-top:-25px;
			margin-left: 83%; 
			font-size: 24px;
		}
	</style>
  </head>
  <script type="text/javascript"></script>
  <body  class="layui-anim">
    <div class="x-nav">
	    <span class="layui-breadcrumb">
	        <a href="">首页</a>
	        <a>
	            <cite>车辆信息</cite>
	        </a>
	    </span>
	</div>
	<div class="x-body">
		<div class="layui-row" style="margin-bottom: 18px">
			<form class="layui-form">
				<div class="layui-inline">
					<div class="layui-input-inline">
	            		<input type="text" id="keyword01" class="layui-input searchVal" placeholder="请输入车牌号" />
					</div>
					<button type="button" class="layui-btn layui-btn-normal" data-type="reload"><i class="layui-icon layui-icon-search"></i>检索</button>
				</div>
			</form>
		</div>
		<xblock>
			<button class="layui-btn layui-btn-warm" id="add"><i class="layui-icon layui-icon-add-circle-fine"></i>新增</button>
			<button class="layui-btn layui-btn-danger" id="del"><i class="layui-icon layui-icon-delete"></i>批量删除</button>
		</xblock>
		<table class="layui-hide" id="tableList" lay-filter="tableList"></table>
		<script type="text/html" id="rowToolbar">
    		<a class="layui-btn layui-btn-xs" lay-event="update"><i class="layui-icon layui-icon-edit"></i>编辑</a>
		</script>
	</div>
	<!-- 添加/编辑框 -->
	<div id="addDivID" style="display:none">
	    <form class="layui-form" id="addFormID" style="margin-top:20px">
	        <div class="layui-form-item">
	            <div class="layui-inline">
	                <label class="layui-form-label">车牌号</label>
	                <input type = "hidden" id = "cid" name="cid">
	                <input  class="layui-input" id="cplate" name="cplate" lay-verify="only" style="width: 213px;">
					<span class="xing" style="margin-left: 101%;">*</span>
	            </div>
	        </div>
	        <div class="layui-form-item">
	            <div class="layui-inline">
	                <label class="layui-form-label">备注</label>
	                <input  class="layui-input" id="cremark" name="cremark" style="width: 213px;">
	            </div>
	        </div>
	        <div class="layui-form-item">
	            <div class="layui-input-block">
	                <button class="layui-btn" id="subBtn" lay-submit lay-filter="addForm">立即提交</button>
	                <button  class="layui-btn layui-btn-primary">取消</button>
	            </div>
	        </div>
			<script type="text/javascript">
				layui.use(['table','layer','upload','form','laydate'], function(){
					var table = layui.table;
					var layer = layui.layer;
					var form = layui.form;
					var laydate = layui.laydate;
					var $ = layui.jquery, active = {
						reload:function () {
							var keyword01 = $("#keyword01").val();
							table.reload('contenttable',{
								method:'get',
								where:{"cplate":keyword01}
								,page: {
									curr: 1//重新从第 1 页开始
								}
							});
						}
					}

					$('.layui-btn').on('click', function(){
						var type = $(this).data('type');
						active[type] ? active[type].call(this) : '';
					});
					table.render({
						elem: '#tableList'
						,url:'/car/list'
						,title: '车辆信息'
						,id :'contenttable'
						,limits:[10,20,30]
						,toolbar: '#toolbar'
						,request: {   //如果无需自定义请求参数，可不加该参数
							pageName: 'page' //页码的参数名称，默认：page
							,limitName: 'pageSize' //每页数据量的参数名，默认：limit
						}
						,response: {   //如果无需自定义数据响应名称，可不加该参数
							countName: 'total' //规定数据总数的字段名称，默认：count
							,dataName: 'rows' //规定数据列表的字段名称，默认：data
						}
						,cols: [
								[
							{type: 'checkbox', fixed: 'left'}
							,{field:'cid', title:'序号', sort: true, type:'numbers', width: 60}
							,{field:'cplate', title:'车牌号'}
							,{field:'cremark', title:'备注'}
							,{fixed:'right',unresize: true, title:'操作', toolbar: '#rowToolbar',width:100, align: 'center'}
							]
						]
						,page: true
						,done : function(){
							$('th').css({
								'background-color': '#009688', 'color': '#fff','font-weight':'bold',
							})
						}
					});

					//监听复选框事件
					table.on('checkbox(tableList)',function(obj){
						if(obj.checked == true && obj.type == 'all'){
							//点击全选
							$('.layui-table-body table.layui-table tbody tr').addClass('layui-table-click');
						}else if(obj.checked == false && obj.type == 'all'){
							//点击全不选
							$('.layui-table-body table.layui-table tbody tr').removeClass('layui-table-click');
						}else if(obj.checked == true && obj.type == 'one'){
							//点击单行
							if(obj.checked == true){
								obj.tr.addClass('layui-table-click');
							}else{
								obj.tr.removeClass('layui-table-click');
							}
						}else if(obj.checked == false && obj.type == 'one'){
							//点击全选之后点击单行
							if(obj.tr.hasClass('layui-table-click')){
								obj.tr.removeClass('layui-table-click');
							}
						}
					})

					/**
					 * 表单校验
					 */
					form.verify({
						//value：表单的值、item：表单的DOM对象
						request: function(value, item){
							if(value == '' || value == null){
								return '不能为空';
							}
						},
						only: function(value, item){
							value = $.trim(value)
							if(value == '' || value == null){
								return '不能为空';
							}else{
								var cplate = $.trim($("#cplate").val())
								var flg = false;
								$.ajax({
									type:'post',
									data:'cplate='+cplate,
									url:'/car/queryAllByMution',
									dataType: 'JSON',
									async: false,
									success:function (data) {
										if(data.length == 0){
											flg  = true;
										}else if(data.length == 1){
											var ma = $.trim($("#cid").val());
											if (ma == data[0].cid) {
												flg  = true;
											}else{
												flg = false;
											}
										}else{
											flg = false;
										}
									}
								});
								if(!flg){
									return '车牌号不能重复';
								}
							}
						}
					});

					//新增
					$("#add").click(function(){
						layer.open({
							type: 1 					//Page层类型
							,area: ['450px', ''] 	//宽  高
							,title: '新增'
							,shade: 0.6 				//遮罩透明度
							,maxmin: true 				//允许全屏最小化
							,anim: 1 					//0-6的动画形式，-1不开启
							,content:$('#addDivID')
							,success: function(){
								$("#cid").val("")
								//初始化数据
								$("#addFormID").find('input[class=layui-input],select').each(function() {
									$(this).val('');
								});
								form.render();
							}
						});
					});

					//编辑
					table.on('tool(tableList)', function(obj){
						var data = obj.data;
						if (obj.event === 'update') {
							layer.open({
								type: 1 					//Page层类型
								,area: ['450px', ''] 	//宽  高
								,title: '编辑'
								,shade: 0.6 				//遮罩透明度
								,maxmin: true 				//允许全屏最小化
								,anim: 1 					//0-6的动画形式，-1不开启
								,content:$('#addDivID')
								,success: function(){
									//数据回显
									for(var i=0;i<Object.entries(data).length;i++) {
										var id = '#' + Object.entries(data)[i][0];
										var text = Object.entries(data)[i][1];
										$(id).val(text);
									}
									form.render();
								}
							});
						}
					});

					//批量删除
					$("#del").click(function(){
						var rowData = table.checkStatus('contenttable');
						var data = rowData.data;
						var idArr = new Array();
						if(data.length == 0){
							layer.alert("请至少选择一条记录！",{icon :5});
						} else {
							var ids="";
							for(var i=0;i<data.length;i++){
								if(ids == ""){
									ids += data[i].cid;
								}else{
									ids += "," + data[i].cid;
								}
							}
							layer.confirm('确定删除吗？', function(){
								$.ajax({
									type:'post',
									url:'/car/delete',
									data:{"ids" : ids},
									dataType:"json",
									success:function(data){
										if(data > 0){
											layer.msg("删除成功！",{icon:6});
											layer.closeAll();
											table.reload('contenttable',{
												method:'get',
												page: {
													curr: 1//重新从第 1 页开始
												}
											});
										}else{
											layer.msg("删除失败！",{icon:5});
											layer.closeAll();
											table.reload('contenttable',{
												method:'get',
												page: {
													curr: 1//重新从第 1 页开始
												}
											});
										}

									}
								});
							});
						}
					});

					/**
					 * 通用表单提交(AJAX方式)
					 */
					form.on('submit(addForm)', function () {
						var index = layer.msg('提交中，请稍候',{icon: 16,time:false,shade:0.8});
						var title = "新增";
						var url = '/car/insert';
						var id = $.trim($("#cid").val());
						if(id != "" && id != null && id != 'undefined'){
							title = "编辑";
							url = '/car/update';
						}
						$.ajax({
							type:'post',
							url:url,
							data:$("#addFormID").serialize(),
							cache:false,
							dataType: 'JSON',
							success:function(data){
								if (data > 0) {
									layer.closeAll();
                                    layer.msg(title+'成功！',{icon:6});
									table.reload('contenttable',{
										method:'get',
										page: {
											curr: 1//重新从第 1 页开始
										}
									});
								} else {
									layer.msg('车牌号有重复,请重新输入！',{icon:5});
									layer.close(index);
								}
							}
						});
						return false;
					})
				});
			</script>
	    </form>
	</div>
  </body>
</html>
